<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<%@ taglib prefix="dict" uri="/WEB-INF/tld/dict.tld" %>
<%@page import="com.nti56.springboot.utils.Constant"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <jsp:include page="../include.jsp"/>
    <script type="text/javascript" src="${ctx}/js/echarts.min.js"></script>
    <script type="text/javascript">
        var barData;
        var echartsBar;//全局变量
        $(function() {
            setHeight();
            
    		$('#proDate').datebox('setValue', '${currYMD}');
    		var proDate = $('#proDate').datebox('getValue');
    		var shift = $('#shift').combobox('getValue');
			getData(proDate,shift,1,10);         
            
    		var total = "${total}";
    		$('#pp').pagination({
    			onSelectPage:function(pageNumber, pageSize){
    				var proDate = $('#proDate').datebox('getValue');
    	    		var shift = $('#shift').combobox('getValue')
    				getData(proDate,shift,pageNumber,pageSize);
    			},
    			onChangePageSize:function(pageSize){
    				var proDate = $('#proDate').datebox('getValue');
    	    		var shift = $('#shift').combobox('getValue')
    				getData(proDate,shift,1,pageSize);
    			},
    			total:total, 
    			pageList: [10,15] 
    		});
    		
    		


        });
		
        function getData(proDate,shift,page,rows){
	       	$.ajax({
					type: "POST",
					url: '${ctx}/cncEcharts/getRealTimeData',
					dataType:"json",
					data:{
						proDate : proDate,
						shift:shift,
						page:page,
						rows:rows,
						sort: "MACH_NUM",
						order:"asc"
					},
					success: function(result) {	   						
						//绘制图表
						printBar(result);
	  				}
			});

        }
        
        function doSearch(){
        	var page = $('#pp').pagination('options');
        	var pageSize = page.pageSize;
    		var proDate = $('#proDate').datebox('getValue');
    		var shift = $('#shift').combobox('getValue')
			getData(proDate,shift,1,pageSize);             	
        }

        function doClear(){
            $('#queryForm').form("clear");
        }

        function setHeight(){
            var c = $('#cc');
            var p = c.layout('panel','center');
            var oldHeight = p.panel('panel').outerHeight();
            var newHeight = p.panel('panel').outerHeight();
            c.layout('resize',{
                height: (c.height() + newHeight - oldHeight),
            });
        }

        function exportExcel() {
            alert("导出功能。。。。。");
        }

        /* 绘制柱状图 */
        function printBar(_source) {
            echartsBar = echarts.init(document.getElementById('echartsBar'));
            option = {
           	    legend: {},
           	    tooltip: {},
           	 	title: {
	           	    text: '机台实时产量对比图',
           	    	textStyle: {
           	     		color: 'red'
          	   		},	           	    
	           	    padding: [5, 0, 10, 200]  // 位置
           	    },
           	    dataset: {
           	        source: _source
           	    },
           	    xAxis: {
           	    	type: 'category',
           	    	axisLabel: {  
           	    	   interval:0,  
           	    	   rotate:10,
	           	       textStyle: {    //文字样式
				           color: "black",
				           fontSize: 12,
				           fontFamily: 'Microsoft YaHei'
			           }
           	    	}  
           	    },
           	    yAxis: {},
           	    // Declare several bar series, each will be mapped
           	    // to a column of dataset.source by default.
           	    series: [
           	        {type: 'bar',
	      	        	itemStyle: {        //上方显示数值
	      	                normal: {
	      	                    label: {
	      	                        show: true, //开启显示
	      	                        position: 'top', //在上方显示
	      	                        textStyle: { //数值样式
	      	                            color: 'black',
	      	                            fontSize: 16
	      	                        }	      	                        
	      	                    },
	      	                    color:'#66ccff'
	      	                }
	      	            }
           	        },
           	        {type: 'bar',
           	        	itemStyle: {        //上方显示数值
           	                normal: {
           	                    label: {
           	                        show: true, //开启显示
           	                        position: 'top', //在上方显示
           	                        textStyle: { //数值样式
           	                            color: 'black',
           	                            fontSize: 16
           	                        }           	                       
           	                    },
           	                    color:'#ff9900'
           	                }
           	            }
           	        }           	       
           	    ]
           	};
            echartsBar.setOption(option);
        }
    </script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height:40px;padding-top:5px;padding-left:5px">
        <form id="queryForm" method="post">
            <div style="margin-bottom:1px;padding-top:1px;padding-left:5px">
				<input class="easyui-datebox" id="proDate" name="proDate" value="" style="width:20%;height:24px;" labelAlign="right" labelWidth="80px" data-options="label:'生产日期:',editable:false,required:true">
                <select class="easyui-combobox" id="shift" name="shift" labelAlign="right" labelWidth="40px" label="班次:"labelPosition="left" editable="false" style="width:15%;height:24px;">
					<c:forEach items="${dictShiftItems}" var="item">
						<option value="${item.itemValue}" >${item.itemText}</option>
					</c:forEach>
				</select>
                <a onclick="doSearch();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">查询</a>
            </div>
        </form>
    </div>   
    <div data-options="region:'center',border:false">
        <div id="echartsBar" style="width:100%;height:100%; padding-top:20px;padding-bottom: 5px;"></div>
        <div id="pp" class="easyui-pagination" ></div>
    </div>
</div>
</body>
</html>